<template>
  <span :style="{ color }">
    <slot>
      {{ value }}
    </slot>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
defineOptions({ name: 'BaseStatus' });
const props = withDefaults(
  defineProps<{
    value: any;
    valueMap: any;
    colorMap?: any;
  }>(),
  {
    value: 0,
    valueMap: { 0: 0 },
    colorMap: {}
  }
);
/** 默认的颜色配置表，可以自己传map来覆盖 */
const ColorMap = {
  /** default */
  0: 'inherit',
  /** success */
  1: '#66C6AF',
  /** fail */
  2: '#DE3F4F'
};
const color = computed(() => (props.colorMap ?? ColorMap)[props.valueMap[props.value]]);
</script>
